<template>
  <el-breadcrumb class="breadcrumb">
    <el-breadcrumb-item class="link" :to="{ path: '/' }">
      <div class="text-color">首页</div>
    </el-breadcrumb-item>
    <el-breadcrumb-item :to="{ name: props.toName }">
      <div class="text-color">{{ props.toTitle }}</div>
    </el-breadcrumb-item>
    <el-breadcrumb-item>
      <div class="title-name">{{ props.titleName }}</div>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
<script setup>
  const props = defineProps({
    toName: { type: String, default: '' },
    toTitle: { type: String, default: '' },
    titleName: { type: String, default: '' }
  })
</script>
<style lang="scss" scoped>
  .breadcrumb {
    margin: 20px auto;
    .title-name {
      max-width: 600px;
      color: #777;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>
